<template>
  <v-app-bar hide-on-scroll class="HeadNav" elevation="0" :style="isShow">
    <router-link to="/" class="text-h6 nav-left" style="letter-spacing: 5px !important;">君役</router-link>
    <v-spacer></v-spacer>
    <div class="nav-right float-right">
      <div tile class="nav-btn" height="100%">
        <router-link class="nav-btn-a" to="/">
          <i class="iconfont icon-shouyetianchong"/> 首页
        </router-link>
      </div>
      <div tile class="nav-btn" height="100%">
        <router-link class="nav-btn-a" to="/">
          <i class="iconfont icon-denglu"/> 登录
        </router-link>
      </div>
    </div>
  </v-app-bar>
</template>

<script>
export default {
  name: "HeadNav",
  methods: {
    scrollToTop() {
      const that = this;
      let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 50) {
        that.isShow = "background: rgba(0, 0, 0, 0.3) !important;color:black !important;";
      } else {
        that.isShow = "background: rgba(0, 0, 0, 0) !important;";
      }
    }
  },
  data() {
    return {
      isShow: "background: rgba(0, 0, 0, 0) !important;"
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
}
</script>

<style scoped>
.nav-left{
  text-decoration: none;
  color: white;
}

.nav-left:after{
  position: absolute;
  left: 100px;
  top: 0;
  width: 100px;
  height: 0;
  content: "";
  background: url("../assets/img/hj.gif");
  transition: all 2s;
}

.nav-left:hover:after{
  height: 100px;
}

.nav-btn-a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

.nav-btn-a:after {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 4px;
  content: "";
  background: skyblue;
  transition: all 0.5s;
}

.nav-btn-a:hover:after {
  width: 100%;
}

.nav-btn {
  position: relative;
}

.nav-right {
  display: flex;
  align-items: center;
  height: 100%;
}

.HeadNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8vh;
  width: 100%;
  color: white !important;
  box-shadow: 0 0 10px 10px white;
}
</style>